<!-- 知识点1：同时按Ctrl+/可以进行注释 -->
<!-- 知识点2：点击右键，选择格式化文档，可以对文档格式进行纠正 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html笔记</title>
  <style type="text/css">
    h6{font-weight: 800;color: brown;text-align: center;font-size: larger;}
  </style>
  <link rel="stylesheet" href="./css/note.css">

</head>

<body>
  <p>知识点3：同时点击shift+！，会出现下面图片1,点击下面的！，即可出现整个文件的基础结构，如下图2</p>
  <p>通过上述步骤，完成了html文件的第一步,搭建好了整体结构，可以在body中书写内容</p>
  <!-- 注意：知识点3中的！为英文状态下的！ -->
  <img src="./img/html construct.png" alt="">
  <!-- img标签中，src后面的地址有两种，一种是绝对的，比如身份证地址，准确且绝对；一种是相对的，比如x家楼下，相对的 -->
  <img src="./img/img02.png" alt="">
  <p>以下介绍一些常见的html元素</p>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <a href="https://www.baidu.com/index.htm">点我去百度</a>
  <img src="./img/img03.png" alt="">
  <p>知识点4：以上介绍了一些简单的html元素，其余的标签可以去菜鸟教程，w3c等网站寻找使用</p>
  <p>知识点5：使用html元素时，只需要打出英文元素即可，之后敲击回车，不需要敲<>，浪费时间</p>
  <h1>一级标题<h2>二级标题</h2>
  </h1>
  <p>知识点6：元素的嵌套，一个元素内可以嵌套其他元素，里面的是子元素，最外层是父元素，注意子元素整体都要在父元素里面</p>
  <p>错误示范，可以看到，下面的p标签乱了,是h2样式</p>
  <h1>一级标题<h2>二级标题</h1>
  <h2 />
  <p>手动换行</p>
  </h2><br><br><br>
  <p>以下为css知识点，html就像人的主体结构，例如头、四肢、身体等，主要的就那些。css就像化妆品等，可以对其进行修饰</p>
  <p>修改分为三种，使用行内样式表，使用内部样式表，使用外部样式表</p>
  <p style="color: blue;text-align: start;">第一种，使用行内样式表，即直接在元素标签内对元素进行修改</p>
  <img src="./img/img04.png" alt="">
  <p>极其不建议，优先级过高，操作麻烦</p><br><br>
  <p>第二种，使用内部样式表，将css代码写到
    html文件的style元素内容中</p>
  <h6>第二种示例</h6>
  <img src="./img/img05.png" alt=""><br><br>
  <p>第三种，再开一个css文件，并在html文件中引用这个文件,第三种就像是保存在工具箱里面了，引用一下，就可以自由使用</p>
  <h4>第三种示例</h4>
  <h5>第三种示例</h5>
  <p>下面图片分别是如何引用和css样式书写</p>
  <img src="./img/img06.png" alt="">
  <img src="./img/img07.png" alt="">
</body>

</html>
